<template>
  <div :class="getClass" :style="getStyle">
    <div class="flex">
      <template v-for="item in data" :key="item.value">
        <div
          :class="[
            'text',
            {
              active: active === item.value,
            },
          ]"
          @click="handleChange(item)"
        >
          {{ item.name }}
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup name="Tabs">
  import { ref, onMounted, computed } from 'vue';
  import type { CSSProperties } from 'vue';

  import { setStyle } from '/@/utils/cssUtil';
  import { ModuleConfig, ModuleValue } from './types';
  import { useDesign } from '/@/hooks/web/useDesign';

  const { prefixCls } = useDesign('Tabs');

  const props = withDefaults(
    defineProps<{
      active?: any;
      config?: ModuleConfig;
      data?: ModuleValue[];
    }>(),
    {
      config: () => ({
        className: '',
      }),
      data: () => [],
    },
  );
  const emit = defineEmits(['change']);
  const active = ref(0);
  const getClass = computed(() => {
    const { className } = props.config;

    return [prefixCls, className];
  });
  const getStyle = computed((): CSSProperties => {
    return setStyle(props.config);
  });
  onMounted(() => {
    active.value = props.active || (props.data.length && props.data[0].value);
  });
  function handleChange(item) {
    active.value = item.value;
    emit('change', item.value, item);
  }
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-Tabs';
  @active-color: #1153d8;

  .@{prefix-cls} {
    display: inline-block;
    overflow: hidden;
    border-radius: 4px;

    .text {
      padding: 0 16px;
      min-width: 88px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      color: @text-color-bold;
      background-color: @table-bg;
      transition: all 0.3s;

      &.active {
        color: @white;
        background-color: @active-color;
      }

      &:hover {
        color: @white;
        background-color: @active-color;
      }
    }
  }
</style>
